<!-- 模板继承 -->
{extend name="public:base" /}

<!-- 页面标题 -->
{block name="title"}Administrator{/block}

<!-- 自定义css -->
{block name="css"}{/block}

<!-- 内容区域 -->
{block name="content"}
  <div class="nav-tabs-custom">
    <ul class="nav nav-tabs">
      <li class=""><a href="{:url('admin/memberGroup/index')}">{:lang('Group')}</a></li>
      <li class="active"><a href="#">{:lang('Create')}</a></li>
      <li class="pull-right"><a href="javascript:history.back(-1);" class="text-muted"><i class="fa fa-chevron-circle-left"></i></a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active">
        <form role="form" id="operate">
            <div class="row">
                <div class="col-md-6">
                    <div class="box box-solid">
                        <div class="box-body">
                            <div class="form-group">
                              <label>{:lang('Name')} <span class="text-red">*</span></label>
                              <div class="row">
                              <div class="col-md-12">
                              <input type="text" name="group_name" class="form-control input-sm" placeholder="">
                              </div>
                              </div>
                            </div>
                            <div class="form-group">
                              <label>{:lang('Upgrade')} <span class="text-red">*</span></label>
                              <div class="row">
                              <div class="col-md-4">
                                    <select class="form-control">
                                        <option>{:lang('Score')}</option>
                                    </select>
                              </div>
                              <div class="col-md-8">
                                <div class="input-group">
                                    <span class="input-group-addon">{:lang('Sum')}</span>
                                    <input type="text" name="min_score" class="form-control" placeholder="">
                                    <span class="input-group-addon">~</span>
                                    <input type="text" name="max_score" class="form-control" placeholder="">
                                </div>
                              </div>
                              </div>
                            </div>
                            <div class="form-group">
                              <label>{:lang('Sort')}</label>
                              <div class="row">
                              <div class="col-md-12">
                              <input type="text" name="weighing" class="form-control input-sm" placeholder="">
                              </div>
                              </div>
                              <p class="help-block"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="box box-solid">
                        <div class="box-body">
                            <table class="table table-condensed table-hover" id="permission">
                                <thead>
                                    <tr>
                                        <th>{:lang('Permission')}</th>
                                        <th class="text-right"><input id="checkAll" type="checkbox"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <form id="form">
                                    {volist name="permission" id="vo"}
                                    <tr data-tt-id="{$vo.id}" data-tt-parent-id="{$vo.pid}">
                                        <td>{:lang($vo.lang_var)}</td>
                                        <td class="text-right"><input name="ids[]" value="{$vo.id}" type="checkbox"></td>
                                    </tr>
                                    {/volist}
                                    </form>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </form>
      </div>
      <!-- /.tab-pane -->
    </div>
    <!-- /.tab-content -->
    <div class="box-footer">
        <div class="btn-group">
            <button class="btn btn-primary btn-flat" onclick="operate();" type="submit"><i class="fa fa-save"></i> {:lang('Save')}</button>
        </div>
    </div>
  </div>
{/block}

<!-- 自定义js -->
{block name="js"}
<script type="text/javascript">
$(document).ready(function(){
    $("#permission").treetable({ expandable: true });
    $("#permission").treetable('expandAll');
    
    // 关联选择

    // 递归获取所有子级
    function getChild(currentId){
        var arr = new Array();
        $("tr").each(function(){
            var allTrPid = $(this).attr('data-tt-parent-id');

            if (allTrPid == currentId) {
                var c = $(this).attr('data-tt-id');
                arr.push(c);
                arr = arr.concat(getChild(c));
            }
        });
        return arr;
    }

    // 递归过去所有父级
    function getParent(currentId){
        var arr = new Array();
        $("tr").each(function(){
            var allTrID  = $(this).attr('data-tt-id');
            var allTrPid = $(this).attr('data-tt-parent-id');
            if (allTrID == currentId) {
                if (allTrPid != 0) {
                    arr.push(allTrPid);
                    arr = arr.concat(getParent(allTrPid));
                }
            }
        });
        return arr;
    }

    $('[type="checkbox"]').click(function(){
        // 当前TR
        var c = $(this).parent().parent().attr('data-tt-id');
        // 父TR
        var p = $(this).parent().parent().attr('data-tt-parent-id');
        
        // 当前checkbox选中状态 它上级要被选中，下级全部被选中。
        var bool = $(this).is(":checked");
        if (bool == true) {
            // 下级全部被选中。
            $("tr").each(function(){
                var all = getChild(c);
                var mychild = $(this).attr('data-tt-id');
                for(var i = 0; i < all.length; i++){
                    if(mychild === all[i]){
                        $(this).find("input").prop("checked",true);;
                    }
                }
            });
            
            // 上级选中
            $("tr").each(function(){
                var all = getParent(c);
                var myparent = $(this).attr('data-tt-id');
                for(var i = 0; i < all.length; i++){
                    if(myparent === all[i]){
                        $(this).find("input").prop("checked",true);;
                    }
                }
            });



        } else {
            // 下级全部被取消选中。
            $("tr").each(function(){
                var all = getChild(c);
                var mychild = $(this).attr('data-tt-id');
                for(var i = 0; i < all.length; i++){
                    if(mychild === all[i]){
                        $(this).find("input").prop("checked",false);;
                    }
                }
            });
        }

    })

});
</script>

<script type="text/javascript">
    function operate(){
        $.ajax({
            url:"{:url('admin/memberGroup/create')}",
            data:$("#operate").serialize(),
            type:'post',
            dataType:'json',
            success:function(xhr){
                if(xhr.code == 200){
                    swal({
                      position: 'center',
                      type: 'success',
                      title: xhr.msg,
                      showConfirmButton: false,
                      toast:false,
                      timer: 2000
                    });
                } else{
                    swal({
                      position: 'center',
                      type: 'error',
                      title: xhr.msg,
                      showConfirmButton: false,
                      toast:false,
                      timer: 2000
                    });
                }
            }
        });
    }

</script>
{/block}